<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>详情页</title>
		<link rel="stylesheet" href="../css/H-ui.reset.css" />
		<link rel="stylesheet" href="../css/java.css" />
	</head>
	<body>
		<!--头部-->
		<div class="toubu">
			<div class="gong clearfix">
				<div class="logo ">
					<img src="../images/logo.png"/>
				</div>
				<div class="fr-li">
					<ul class="clearfix">
						<li><a href="#">视频教程</a></li>
					    <li><a href="#">技术文章</a></li>
					    <li><a href="#">社区问答</a></li>
				    	<li><a href="#">关于我们</a></li>
					</ul>
				</div>
				<div class="clearfix fr ft">
				<div class="search fl">
					<div class="sea_txt">
						<input type="text" placeholder="搜索您需要的资料" id="search">
						<a href="#" class="sear"><i class="icon-search"></i> 搜索</a>
					</div>
			     </div>
			     <div class="typeShowUser">
					<a href="javascript:delogo();" class="loginName">请登录</a>
					<a href="javascript:deReg();" class="loginNames">免费注册</a>
				</div>
				</div>
			</div>
		</div>
		<!--主题内容-->
		<div class="Technicaar clearfix">
			<div class="indexNav ">
				<a href="#">首页</a> &gt;
				<a href="#">课程</a> 
				&gt;<a href="">HTML/CSS</a> 
				&gt;<a href="">CSS</a> 
				&gt;CSS视频教程-玉女心经版
			</div>
			<div class="vlesson clearfix">
				<div title="CSS视频教程-玉女心经版" class="fl vlesson-infoL">
					<img src="../images/nb.jpg" />
					<div class="coursename">CSS视频教程-玉女心经版</div>
				</div>
				<div class="fl vlesson-infoR">
					<h1 class="color33 font24 marginB10">CSS视频教程-玉女心经版</h1>
					<p class="color66 font14 marginB10 p2" title="html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们再来学习本章节的css，将会获得更好的体验。课程内容非常有节奏的安排，知识点简单明了，让你从头到尾学习毫无压力。本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。">html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们再来学习本章节的css，将会获得更好的体验。课程内容非常有节奏的安排，知识点简单明了，让你从头到尾学习毫无压力。本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
					<p class="lv_tag marginB12"><a href="javascript:;">初级</a></p>
					<p class="color66 font14 lv_tag2 marginB12"><span>共25章节</span><span>8264人参与</span><span>添加时间：2018-03-22 14:07</span></p>
					<p class="lv_btn">
						<span class="a1 font14">
							<a href="#" class="i_fa_a">开始学习</a>
						</span>
					</p>
				</div
			</div>
		</div>
		   <div class="container fl">
		   	 <div class="VLCleft">
		   	 	<ul class="clearfix color66">
		   	 		<li><span  class="active">课程目录</span></li>
		   	 		<li><span>相关文章</span></li>
		   	 		<li><span>课件下载</span></li>
		   	 	</ul>
		   	 	<div class="ay">
		   	 		<div class="tab-b0x" title="点击图片阅览">
		   	 		<a href="#">
		   	 			<img src="../images/phpcn_box.png" />
		   	 		</a>
		   	 	</div>
		   	 	<div class="itm-list clearfix">
		   	 		<div class="fl font14 color66">5小时学习时长</div>
		   	 		<div class="fr font14 color66">
		   	 			原创教程：独孤九剑系列
		   	 			<a href="#" class="just-check">立即查看</a>
		   	 		</div>
		   	 	</div>
		   	 	<div class="mod-chapters">
		   	 		<div class="chapter">
		   	 			<h3>
		   	 			    <strong>
		   	 			    	<img src="../images/01.png" />
		   	 			    	 第1章 CSS快速入门
		   	 			    </strong>
		   	 			</h3>
		   	 			<ul class="video">
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 			</ul>
		   	 		</div>
		   	 		<div class="chapter">
		   	 			<h3>
		   	 			    <strong>
		   	 			    	<img src="../images/01.png" />
		   	 			    	 第1章 CSS快速入门
		   	 			    </strong>
		   	 			</h3>
		   	 			<ul class="video">
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 			</ul>
		   	 		</div>
		   	 		<div class="chapter">
		   	 			<h3>
		   	 			    <strong>
		   	 			    	<img src="../images/01.png" />
		   	 			    	 第1章 CSS快速入门
		   	 			    </strong>
		   	 			</h3>
		   	 			<ul class="video">
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 			</ul>
		   	 		</div>
		   	 		<div class="chapter">
		   	 			<h3>
		   	 			    <strong>
		   	 			    	<img src="../images/01.png" />
		   	 			    	 第1章 CSS快速入门
		   	 			    </strong>
		   	 			</h3>
		   	 			<ul class="video">
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 				<li><a href="#">1 CSS中的文本控制</a></li>
		   	 			</ul>
		   	 		</div>
		   	 	</div>
		   	 </div>
		   </div>
		   </div>
		   <div class="VLCright fr">
		   	 <div class="VLCright-fr clearfix">
		   	 	<a href="#" class="fl"><img src="../images/5aa1fa73125e7225.jpg"></a>
		   	 	<div class="fr fs">
		   	 		<h3 class="font16 color33 marginB14">落花飞雪</h3>
		   	 		<a href="#">他的课程</a>
		   	 	</div>
		   	 	<p class="font14 color66">Web前端工程师<br>我会一直直默默的关注着你成长的每一步</p>
		   	 </div>
		   	  <div class="other-user">
		   	  	<h3 class="font14 color33">看过该课程的同学也在学</h3>
		   	  	 <a href="#">
		   	  	 	<img src="../images/5a448d8b9251e427.jpg" title="一周学会php" />
		   	  	 	<span class="font14">116382次播放</span>
		   	  	 </a>
		   	  	 <ul>
		   	  	 	<li>
		   	  	 		<a class="font14 color66" href="#">独孤九贱(4)_PHP视频教程</a>
		   	  	 	</li>
		   	  	 	<li>
		   	  	 		<a class="font14 color66" href="#">独孤九贱(5)_ThinkPHP5视频教程</a>
		   	  	 	</li>
		   	  	 	<li>
		   	  	 		<a class="font14 color66" href="#">独孤九贱(1)_HTML5视频教程</a>
		   	  	 	</li>
		   	  	 	<li>
		   	  	 		<a class="font14 color66" href="#">PHP入门视频教程之一周学会PHP</a>
		   	  	 	</li>
		   	  	 	<li>
		   	  	 		<a class="font14 color66" href="#">phpStudy极速入门视频教程</a>
		   	  	 	</li>
		   	  	 	<li>
		   	  	 		<a class="font14 color66" href="#">ThinkPHP5实战之【教学管理系统】</a>
		   	  	 	</li>
		   	  	 </ul>
		   	  </div>
		   </div>
	</div>
		
		<footer id="footer">
		   <div class="foot clearfix">
		    <div class="clearfix">
		       <ul>
		       <li><a href="#">网站首页</a></li>
		       <li><a href="#">视频教程</a></li>
		       <li><a href="#">技术文章</a></li>
		       <li><a href="#">辅助工具</a></li>
		       <li><a href="#">社区问答</a></li>
		       <li><a href="#">网站源码</a></li>
		       <li><a href="#">关于我们</a></li>
		       <li><a href="#">联系我们</a></li>
		     </ul>
		    </div>
		    <div class="img">
		       <ul>
		          <li><img src="../images/011.jpg"></li>
		          <li><img src="../images/011.jpg"></li>
		          <li><img src="../images/011.jpg"></li>
		          <li><img src="../images/011.jpg"></li>
		       </ul>
		   
		    </div>
		    <div class="imgs"> <p>网站备案号（蜀ICP备16022888号-3）</p>
		      <img src="../images/java-3_03.jpg" /></div>
		   </div>
		</footer>
		 <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
		<script>
			   $(function(){
			   	  var chapter=$(".chapter h3");
			   	  var VLCleft=$(".VLCleft ul li span");
			   	  var ay=$(".ay");
			   	   
			   	      chapter.on("click",function(){
			   	      	  var ar = $(this).next();
			   	      	  if(ar.is(":hidden")){
			   	      	  	  ar.show()
			   	      	  }else{
			   	      	  	ar.hide()
			   	      	  }
			   	      })
			   	       
			   	  //tab切换
			   	 
			   	     for(var i=0; i<VLCleft.length;i++){
			   	     	  var ts=VLCleft[i];
			   	     	      ts.index=i;
			   	     	   ts.onclick=function(){
			   	     	   	   for(var j=0; j<VLCleft.length; j++){
			   	     	   	   	   VLCleft[j].className=""
			   	     	   	   }
			   	     	   	   this.className="active";
			   	     	   	   
			   	     	   	   for(var x=0; x<ay.length; x++){
			   	     	   	   	     ay[x].style.display ="none"

			   	     	   	   }
			   	     	   	  ay[this.index].style.display ="block"

			   	     	   }
			   	     }
			   })
			   
			   
		</script>
	</body>
</html>
